<template>
  <div :style="{zIndex:zIndex}" v-if="visible" ref="jDialog" class="j_dialog">
    <div v-if="isMask" class="dialog_mask" @click="closeDialog" />
    <div
      class="dialog_header flex flex_row a_item "
      @mousedown="draggableFun($event)"
    >
      <div>{{ title }}</div>
      <div class="close flex a_item" @click="closeDialog">×</div>
    </div>
    <div class="dialog_content">
      <div>
        <slot />
      </div>
    </div>
    <!--  <div class="bottomRow flex flex_row_reverse">-->
    <!--    <el-button  type="primary" round @click="closeDialog">关闭</el-button>-->
    <!--    <el-button  type="primary" round  @click="closeDialog">确定</el-button>-->
    <!--  </div>-->
  </div>
</template>

<script>

export default {
  name: 'JDialog',
  props: {
    title: {
      type: String,
      default: '提示'
    },
    visible: Boolean,
    isMask: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: [String,Number],
      default: 2001
    }

  },
  watch: {
    // visible(n){
    //   if (n){
    //     const app = document.querySelector('.j_dialog')
    //     const left = document.getElementsByClassName('sidebar-container')[0].offsetWidth || 0
    //     app.style.left = ((window.screen.width - app.offsetWidth) / 2)-left +'px'
    //   }
    // }
  },
  methods: {
    draggableFun(e) {
      const el = this.$refs.jDialog
      const dialogHeaderEl = el.querySelector('.dialog_header')
      const dragDom = this.$refs.jDialog

      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const screenWidth = document.body.clientWidth
      const screenHeight = document.documentElement.clientHeight

      const dragDomWidth = dragDom.offsetWidth // 对话框宽度
      const dragDomheight = dragDom.offsetHeight // 对话框高度

      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft
      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop

      let styL = this.sty(dragDom, 'left')
      let styT = this.sty(dragDom, 'top')

      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        let left = e.clientX - disX
        let top = e.clientY - disY
        // 边界处理
        if (-(left) > minDragDomLeft) {
          left = -(minDragDomLeft)
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
          top = -(minDragDomTop)
        } else if ((top > maxDragDomTop)) {
          top = maxDragDomTop
        }

        // 移动当前元素
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    sty(dom, attr) {
      return getComputedStyle(dom, false)[attr]
    },
    closeDialog() {
      this.$emit('update:visible', false)
    }
  }}
</script>

<style lang="scss" scoped>
.j_dialog{
  position: fixed;
  top: 20%;
  box-shadow: rgb(200,200,200) 0 0 10px 5px;
  background-color: #ffffff;
  margin: auto;
  left: 0;
  right: 0;
  z-index: 1;
  .dialog_mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 0;
  }
}
.dialog_header{
  cursor: move;
  height: 60px;
  font-size: 18px;
  font-family: '宋体';
  position: relative;
  padding: 15px;
  background-color: #ffffff;
}
.dialog_content{
  background-color: #ffffff;
  z-index: 255;
  position: relative;
  padding: 15px;
}
.flex{
  display: flex;
}
.flex_row{
  flex-direction: row;
}
.fl1{
  flex: 1;
}
.a_item{
  align-items: center;
}
.j_center{
  justify-content: center;
}
.flex_row_reverse{
  flex-direction: row-reverse;
}
.bottomRow{
 padding: 20px;
}
.close{
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 30px;
}
</style>
